<template>
  <n-layout>
    <n-layout-header bordered>
      <div class="header">文件预览: {{ fileInfo.name }}</div>
    </n-layout-header>
    <component :is="renderComp()"></component>
  </n-layout>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getFileInfo } from "@/api";
import SettingItem from "@/pages/editor/components/config-panel/components/item.vue";
import imageViewer from "./components/image.vue";
import videoViewer from "./components/video.vue";
import geojsonViewer from "./components/geojson/geojson.vue";
import fileInfoVue from "./components/file-info.vue";
import { h } from "vue";
import { NLayout, NLayoutContent, NLayoutSider, useMessage } from "naive-ui";
import { render } from "vue";
import geoJsonConfig from "./components/geojson/config.vue";
const imageTypes = ["PNG", "JPG", "JPEG", "WEBP"];
const videoTypes = ["MOV", "MP4"];
const geojsonTypes = ["GEOJSON"];
const route = useRoute();
const message = useMessage();
const uid = ref("");
const fileInfo = ref({
  id: 28,
  createTime: "2024-01-18 13:07:20",
  updateTime: "2024-01-18 13:07:20",
  uid: "756b6ea0-b5bf-11ee-b65e-4bd8e1b62ce2",
  name: "6301307F-0F0F-46A5-9F63-2A1DCEF8AAE3.MOV",
  isFolder: false,
  url: "",
  size: 969576,
  type: "",
  parentId: "1",
  status: 1,
  from_user: 1,
});
const handleFileInfo = () => {
  getFileInfo({ uid: uid.value }).then((res: any) => {
    console.log(res);
    fileInfo.value = res.data;
  });
};
const renderComp = () => {
  let slot;
  let slotConfig;
  const type = fileInfo.value.type.toUpperCase();
  if (imageTypes.indexOf(type) != -1) {
    slot = h(imageViewer, { src: fileInfo.value.url });
  } else if (videoTypes.indexOf(type) != -1) {
    slot = h(videoViewer, { src: fileInfo.value.url });
  } else if (geojsonTypes.indexOf(type) != -1) {
    slot = h(geojsonViewer, { src: fileInfo.value.url });
    slotConfig = geoJsonConfig;
  }
  return h(
    NLayout,
    { hasSider: true, siderPlacement: "right" },
    {
      default: [
        h(
          NLayoutContent,
          { class: ["content"] },
          {
            default: () => slot,
          }
        ),
        h(
          NLayoutSider,
          { width: 280, bordered: true },
          {
            default: () =>
              h(slotConfig || fileInfoVue, { value: fileInfo.value }),
          }
        ),
      ],
    }
  );
};
function copyToClipboard(text) {
  var textarea = document.createElement("textarea"); //创建临时元素
  textarea.value = text; //设置值为需要复制的内容
  document.body.appendChild(textarea); //将该元素添加到页面上
  textarea.select(); //选中输入框中的内容
  try {
    var successful = document.execCommand("copy"); //执行复制命令
    message.success("已复制到剪贴板");
  } catch (err) {
    message.error("无法复制到剪贴板");
  } finally {
    document.body.removeChild(textarea); //移除临时元素
  }
}
onMounted(() => {
  uid.value = route.query.uid as string;
  handleFileInfo();
});
</script>

<style lang="scss" scoped>
.header {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 60px);
}
:deep() {
  .n-layout-scroll-container {
    width: 100%;
  }
}
</style>
